<template>
  <div class='car-left'>
    <!-- 地下停车位总量 -->
    <div class="car-saturability">
      <h4>
        <span></span>
        <span>南京市各地区地下停车总量</span>
      </h4>
      <car-total></car-total>
    </div>

    <!-- 车流趋势 -->
    <div class="car-density">
      <h4>
        <span></span>
        <span>车流趋势</span>
      </h4>
      <car-flow class=''></car-flow>
    </div>
  </div>
</template>
<script>
import CarFlow from '../echarts/EchartsCarFlow.vue'
import CarTotal from '../echarts/EchartsCarTotal'
export default {
  name: 'car-left',
  components: {
    CarFlow,
    CarTotal
  }
}
</script>
<style lang="scss">
$precent: 100vw / 1920;
.car-left {
  h4 {
    color: #ddd;
    font-weight: 500;
    letter-spacing: 1 * $precent;
    text-align: left;
    margin: 2 * $precent 0 * $precent 15 * $precent 20 * $precent;
    font-size: 20 * $precent;
    height: 50 * $precent;
    line-height: 50 * $precent;
    display: flex;
    align-items: center;
    span:nth-child(1) {
      width: 5 * $precent;
      height: 20 * $precent;
      background: #fff000;
      // margin-left: 25*$precent;
    }
    span:nth-child(2) {
      margin-left: 10 * $precent;
    }
    img {
      height: 40%;
      margin-left: 290 * $precent;
    }
  }
  .car-saturability {
    width: 463 * $precent;
    height: 612 * $precent;
    background: url("../../static/image/3/内容底图-1.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: -10 * $precent;
  }
  .car-density {
    width: 463 * $precent;
    height: 409 * $precent;
    background: url("../../static/image/3/内容底图-2.png") no-repeat;
    background-size: 100% 100%;
  }
  .carFlow {
    width: 100%;
    height: 260 * $precent;
  }
  .car-total {
    height: 500 * $precent;
  }
}
</style>